<template>
  <q-page class="row gutter-md" :padding="!$q.platform.is.mobile">
    <q-inner-loading visible v-if="list.length == 0">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>

    <!-- account list -->
    <div class="col-xs-12 col-md-6" v-if="list.length > 0">
      <q-list separator dense class="q-py-none" :no-border="$q.platform.is.mobile">
        <q-list-header>账号列表: <b class="text-primary">{{list.length}}</b>人</q-list-header>
        <q-item v-for="(item) in list" :key="'user_'+item.id" v-if="list.length>0">          
          <q-item-main :label="item.name" :sublabel="item.code" />
          <q-item-side right>{{item.roles.join(',')}}</q-item-side>
        </q-item>
      </q-list>
    </div>

    <!-- create new -->
    <div class="col-xs-12 col-md-6" v-if="list.length > 0">
      <q-list dense class="q-py-none" :no-border="$q.platform.is.mobile">
        <q-list-header>新建账号</q-list-header>
        <q-item>
           <q-input class="full-width" v-model="model.code" float-label="账号(姓名全拼,必填)" ref="code" />
        </q-item>
        <q-item>
           <q-input class="full-width" v-model="model.name" float-label="昵称" />
        </q-item>
        <q-item>
           <q-input class="full-width" v-model="model.password" type="password" float-label="初始密码(默认为:paprika@2018)" />
        </q-item>
        <q-item>
           <q-input class="full-width" v-model="model.role" float-label="角色" />
        </q-item>
        <q-item>
           <q-btn color="primary" class="full-width q-my-sm" icon="mdi-plus" label="新建账号" 
              :loading="loading" @click="createAccount" />
        </q-item>
      </q-list>
    </div>

  </q-page>
</template>

<script>
export default {
  name: 'PageIndexAccounts',
  data () {
    return {
      loading: false,
      list:[],
      model:{
        code:'',
        name:'',
        password:'',
        role:''
      }
    }
  },
  mounted() {
    this.$api.ui.pageTitle = '账号管理';
    this.loadAccounts();
  },
  methods: {
    loadAccounts() {
      let me = this;
      this.$api.account.loadAccounts(res=>{
        me.list = res.data.model;
      });
    },
    createAccount() {
      let me = this;
      let account = {};
      if(me.model.code.length==0) {
        me.$q.notify({message: '账号必须填写', type: 'negative'});
        me.$refs.code.focus();
        return;
      }
      account.code = me.model.code;
      account.name = me.model.name.length==0?me.model.code:me.model.name;
      account.password = me.model.password.length==0?'paprika@2018':me.model.password;
      account.role = me.model.role.length==0?'':me.model.role;
      me.loading = true;
      this.$api.account.createAccount(account, res=>{
        me.list.unshift(res.data.model);
        me.$q.notify({message: '账号创建成功', type: 'positive'});
        me.model.code='';
        me.model.name='';
        me.$refs.code.focus();
        me.loading = false;
      });
    }
  }
}
</script>
